ARTS NUMÉRIQUES

LOGICIELS


ActionScript > Menu déroulant


par : gwenola

Un menu déroulant

(d’après un exercice de Bertrand Gilles - Technocité)

1. Sur la scène principale, créez un nouveau Movie Clip (Ctrl/Pomme+F8). Nommez-le Menu déroulant.

2. Dans le scénario du clip, créez un Rectangle Noir sans Contour. Via l’Inspecteur des propriétés, attribuez-lui les mesures L 200.0 px x H 50.0 px et les coordonnées X 0.0 et Y 0.0.

3. Convertissez ce rectangle en bouton (F8). Nommez-le Bt_Menu. Puis double-cliquez sur le rectangle pour rentrer dans son imbrication de bouton. Dans le scénario du bouton, créez un nouveau calque, nommé Texte.

4. A l’état Haut - Up du calque Texte, activez l’outil Texte de la barre d’outils. Vérifiez, via l’Inspecteur des propriétés, que le mode de texte est bien défini à Statique. Puis tapez le titre : menu déroulant. Via l’Inspecteur des propriétés :

-  Attribuez le Blanc comme couleur.

-  Comme police : Helvetica ; Taille : 20 ; Crénage : 3.

-  Positionnez le texte : X et Y : 0.0.

5. A l’état Dessus - Over :

-  Dans le calque Texte, créez une image clé (F6). Via l’Inspecteur des propriétés, changez librement la couleur du texte.

-  Dans le calque du rectangle, créez une image (F5).

6. Tout en haut du scénario, au-dessus de la liste des calques, cliquez sur Menu déroulant pour remonter au niveau du Movie Clip (fig. 1). Nommez l’unique calque disponible Menu, puis créez-en un nouveau, placez-le sous le calque Menu et nommez-le Titre 1.

7. Dans ce nouveau calque, tracez un rectangle de couleur libre sans contour aux dimensions : L 130.0 et H 50.0.

Positionnez-le à X 165.0 et Y 0.0. Convertissez ce rectangle en bouton (F8) nommé Bt_Titres. Dans l’Inspecteur des propriétés, nommez cette instance de bouton Titre1. Puis double-cliquez sur ce rectangle pour accéder à son scénario de bouton.

8. Dans le scénario du bouton Titre1, créez un nouveau calque, nommé Texte, et tapez titre :

-  Police : Helvetica ; taille : 20 ; Crénage : 10 ; couleur : Blanc ; position : X et Y 0.0.

9. A l’état Dessus - Over :

-  Calque Texte : image clé (F6) et changez librement la couleur du texte via l’Inspecteur des propriétés.

-  Calque du rectangle : image (F5).

10. Tout en haut du scénario, au-dessus de la liste des calques, cliquez sur Menu déroulant pour remonter au niveau du Movie Clip. Là, créez un nouveau calque nommé Titre 2, au-dessus du calque Titre 1. Puis cliquez sur le rectangle du calque Titre 1 et copiez-le (Ctrl/Pomme+c). Sélectionnez ensuite le calque Titre 2 et collez le rectangle (Ctrl/Pomme+v). Dans l’Inspecteur des propriétés :

-  Position du nouveau rectangle : X 165.0 et Y 50.0 ;

-  Nommez cette instance de bouton Titre2 ;

-  Définissez une nouvelle couleur librement : Color > Tint > cliquez sur le carré de couleur pour choisir librement parmi les nuances disponibles. Puis à droite de ce carré, pour le pourcentage de la nouvelle teinte, entrez 50%.

11. Créez un nouveau calque au-dessus du calque Titre 2, nommé Titre 3. Copiez le bouton du calque Titre 1 et collez-le dans le nouveau calque. Dans l’Inspecteur des propriétés :

-  Position du nouveau rectangle : X 165.0 et Y 100.0 ;

-  Nommez cette instance de bouton Titre3 ;

-  Définissez une nouvelle couleur librement : Color > Tint > cliquez sur le carré de couleur pour choisir librement parmi les nuances disponibles. Puis à droite de ce carré, pour le pourcentage de la nouvelle teinte, entrez 60%.

12. Créez un nouveau calque au-dessus de Titre 3. Nommez-le Masque titres. Puis créez une image à l’image 20 pour tous les calques simultanément :

-  Dans la ligne du temps, à hauteur de l’image 20 du calque du haut de la pile (Menu), cliquez et faites glisser le curseur de souris vers le bas, pour noiricir l’image correspondante de chaque calque.

-  Quand toutes les cases de l’image 20 sont noircies, tapez F5 pour insérer une nouvelle image dans tous les calques simultanément.

13. Dans le calque Masque titres :

-  Sélectionnez l’image 1 :

- Tracez un rectangle de couleur libre sans contour. Dimensions : L 150.0 et H 12.0 ; Position : X 165.0, Y - 40.0.

- Convertissez ce rectangle en Symbole Graphique (F8).

-  A l’image 10 :

- Tapez F6 pour insérer une image clé.

- Activez l’outil Transformation libre de la barre d’outil . Enfoncez Alt et redimensionnez le rectangle de sorte qu’il recouvre les 3 boutons titres (fig. 2).

-  A l’image 20 :

- Tapez F6 pour insérer une image clé. Enfoncez Alt et redimensionnez le rectangle de sorte qu’il retrouve à peu près sa taille initiale, au-dessus des 3 boutons (fig. 3).

-  Cliquez entre l’image 1 et l’image 10 et créez une interpolation de mouvement via l’Inspecteur des propriétés (Tween > Motion).

-  Cliquez entre l’image 10 et l’image 20 et créez de la même manière une autre interpolation de mouvement (fig. 4 pour l’aspect de la ligne du temps).

-  Double-cliquez sur le carré de couleur à droite de l’intitulé du calque Masque titres (fig. 4, entouré) : Type de calque > Masque.

14. Double-cliquez sur le carré de couleur à droite de l’intitulé des chacun des 3 calques Titres et changez le Type de calque en Masqué (fig. 5).

15. Tout en haut de la liste des calques, cliquez sur la flèche pour retourner sur la scène principale. Celle-ci est vide. Nous avons travaillé jusqu’ici dans un Movie Clip, indépendamment de la scène. Allez donc dans le menu Fenêtre - Window > Library - Bibliothèque et glissez une instance du Clip Menu déroulant depuis la bibliothèque sur la scène. Prévisualisez l’animation : Ctrl/Pomme+Enter.

Pour contrôler le déroulement de l’animation, reste à placer quelques actions, temporelles et boutons, et à créer un bouton invisible.

16. Double-cliquez sur le clip sur la scène principale pour entrer dans l’imbrication :

-  Créez un nouveau calque au-dessus du calque Menu, nommé Actions.

Puis ouvrez le panneau des Actions en cliquant sur le bouton fléché de l’Inspecteur des propriétés :

- Image 1, entrez le code suivant :

- Image 10, créez une image clé vide (F7) et entrez le code suivant :

- Image 20, créez une image clé vide (F7) et entrez le code suivant :

17. Créez un nouveau calque de type Normal (non masqué) tout en bas de la pile, nommé Bouton Invisible.

Créez un rectangle de couleur libre sans contour sur la scène, recouvrant largement l’ensemble des boutons. Puis convertissez-le en bouton (F8). Nommez-le Bt_Invisible. Double-cliquez sur le nouveau bouton pour rentrer dans son scénario :

-  Sélectionnez l’image clé de l’état Haut et faites-la glisser jusqu’à l’état Cliquable - Hit. Puis retournez sur le scénario du Movie Clip.

-  Sélectionnez l’image clé du calque Bouton Invisible et faites-la glisser à l’image 10 du même calque.

-  Cliquez à l’image 11 de ce calque et créez une image clé vide (F7). Voyez la figure 6 pour l’allure de la ligne du temps à ce stade.

-  Prévisualisez l’animation et constatez qu’il ne se passe plus rien : l’animation est bloquée à l’image 1.

18. Actions Boutons :

-  Cliquez sur le bouton Menu déroulant sur la scène pour le sélectionner. Dans le panneau Actions, entrez l’action :

Prévisualisez et constatez que l’animation se bloque à l’image 10.

-  Sélectionnez l’image clé du calque Bouton Invisible, puis cliquez sur le bouton Invisible sur la scène. Entrez l’action :

Prévisualisez l’animation et constatez que désormais, au survol du bouton Menu déroulant, les titres se déroulent, et au survol de la zone du bouton invisible, les titres se réenroulent. De plus, au survol de chacun des titres, l’intitulé correspondant change de couleur.




logo DOCUMENT 269 menu déroulant PDF 218008 logo DOCUMENT 272 menu déroulant Flash 2615
rechercher par mot-clé

mots-clés liés à cet article

actionscript

flash

interactivité

quelques sites liés aux mots-clés de cet article


actionscript
mediabox
Centre de formation Flash, Dreamweaver, Director.
développeur
Toutoriaux et scripts sur Java, Javascript, PHP, (...)
cbt cafe
Computer Based Training featuring free Video tutorials (...)
actionscript sur wikipédia
Description de l’ActionScript sur Wikipédia.
zoneflashmx
Portail Flash, Actions script, html, Javascript, (...)
trucsweb
ASP, Javascript, HTML, DHTML, CSS, DOM, XHTML, WML, (...)
codes-sources
C++, ASP, ASP.NET, PHP, Java, ColdFusion, Javascript, (...)
i-do
Site de Thierry Guibert.
levitated
Jared Tarbell, artiste et programmeur
anonymes
Collectif d’artistes web (flash).


flash
employé du moi
L’employé du Moi collectif de bande dessinée (...)
macromedia
dreamweaver, flash, director ...
quesaco
Astuces développeur WEB, exemples flash, librairie (...)
oculart
Animation flash fantastique.
guenoun
Animation typographique.
devilles harem girls
Animation Flash.
zoneflashmx
Portail Flash, Actions script, html, Javascript, (...)
t45ol
Flash games.
flying puppet
L’artiste Nicolas Clauss.
mediabox
Centre de formation Flash, Dreamweaver, Director.


interactivité
chatonsky
Gregory Chatonsky, artiste multimedia.
maeda
John Maeda, artiste programmeur.
pure data
Logiciel open-source de programmation pour la création (...)
trustfiles
The Trustfiles is an artistic multi-media project by (...)
creative nerve
Creative Nerve was founded by Camille Utterback to (...)
ars electronica
Festival d’Art Electronique (Autriche).
buddy lee
Guidance Counselor.
stanza
Steve Tanza, artiste multimedia.
art interactive
Art Interactive’s mission is to provide a public (...)
boff
Vincent Paesmans ’art works.